/**
 * RelationshipGraphPage
 * 表关系图可视化页面
 * Features: 图形化展示表之间的外键关系
 *
 * TODO: 需要集成图形可视化库 (如 ReactFlow 或 D3.js)
 * 当前为MVP版本,显示关系列表而非图形
 */

import React, { useState } from 'react'
import { Card, Select, Empty, Alert } from 'antd'
import { useDataSourceList } from '@/hooks/useDataSource'

export const RelationshipGraphPage: React.FC = () => {
  const [selectedDatasource, setSelectedDatasource] = useState<number | undefined>()

  // 查询数据源列表
  const { data: datasourceData } = useDataSourceList({ page: 0, size: 100 })

  return (
    <div className="p-6">
      <Card title="表关系图">
        <div className="space-y-4">
          {/* 数据源选择 */}
          <div>
            <label className="block mb-2 font-medium">选择数据源</label>
            <Select
              placeholder="请选择数据源"
              style={{ width: 300 }}
              value={selectedDatasource}
              onChange={setSelectedDatasource}
            >
              {datasourceData?.content?.map((ds) => (
                <Select.Option key={ds.id} value={ds.id}>
                  {ds.name} ({ds.dbType})
                </Select.Option>
              ))}
            </Select>
          </div>

          {/* MVP提示信息 */}
          <Alert
            message="功能开发中"
            description={
              <div>
                <p>表关系图可视化功能正在开发中,将支持以下特性:</p>
                <ul className="list-disc list-inside mt-2">
                  <li>图形化展示表之间的外键关系</li>
                  <li>点击表高亮显示相关联的表</li>
                  <li>悬停显示外键字段详情</li>
                  <li>搜索和筛选功能简化复杂视图</li>
                </ul>
                <p className="mt-2 text-gray-500">
                  技术方案: 计划使用 ReactFlow 或 D3.js 实现交互式关系图
                </p>
              </div>
            }
            type="info"
            showIcon
            className="mt-4"
          />

          {/* 占位内容 */}
          {selectedDatasource ? (
            <div className="mt-4 p-8 bg-gray-50 rounded border-2 border-dashed border-gray-300">
              <Empty
                description={
                  <div>
                    <p className="mb-2">关系图可视化区域</p>
                    <p className="text-sm text-gray-500">
                      此处将显示数据源 ID {selectedDatasource} 的表关系图
                    </p>
                  </div>
                }
              />
            </div>
          ) : (
            <div className="mt-4 p-8 bg-gray-50 rounded border-2 border-dashed border-gray-300">
              <Empty description="请先选择数据源" />
            </div>
          )}
        </div>
      </Card>
    </div>
  )
}

export default RelationshipGraphPage
